<template>
    <div class="app-content">
          <div style="height: 100%;  width: 250px; border-right: 1px solid #9ec4f0;">
            <div class="treeBox" >
              <el-tree
                :data="resourceData.data"
                node-key="id"
                :empty-text="emptyText"
                ref="tree"
                @node-click="handle"
                :default-expanded-keys="[resourceData.data[0].id]"
                :props="defaultProps"
                class="tree"
                style="width: 100%"
                :expand-on-click-node="false"
              >
              <!-- 树之前提添加图标 -->
              <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                 <img class="organization-img" src="../../../../assets/img/el-tree-img/file.png" alt="">{{ node.label }}
            </span>              
           </span>
              </el-tree>
            </div>
          </div>
        </div>
  
  </template>
   
  <script>
export default {
  name: "resourceTree",
  data() {
    return {
      emptyText:"暂无数据",
      defaultProps: {
        children: "children",
        label: "name",
        value: "id"
      },
      resourceData: {
        code: 200,
        message: "SUCCESS",
        data: [
          {
            id: "00001",
            name: "吉林",
            parentId: "",
            children: [
              {
                id: "000010",
                name: "长春市",
                parentId: "00001",
                children: []
              },
              {
                id: "000011",
                name: "吉林市",
                parentId: "00001",
                children: []
              },
              {
                id: "000012",
                name: "延边朝鲜自治州",
                parentId: "00001",
                children: [
                  {
                    id: "0000120",
                    name: "烽火",
                    parentId: "00001",
                    children: [
                      {
                        id: "00001200",
                        name: "涉访专项",
                        parentId: "00001",
                        children: []
                      }
                    ]
                  }
                ]
              },
              {
                id: "000013",
                name: "四平市",
                parentId: "00001",
                children: []
              },
              {
                id: "000013",
                name: "通化市",
                parentId: "00001",
                children: []
              },
              {
                id: "000013",
                name: "白城市",
                parentId: "00001",
                children: []
              },
              {
                id: "000014",
                name: "辽源市",
                parentId: "00001",
                children: []
              },
              {
                id: "000015",
                name: "白山市",
                parentId: "00001",
                children: []
              },
              {
                id: "000016",
                name: "松原市",
                parentId: "00001",
                children: []
              }
            ]
          }
        ],
        success: true
      }
    };
  },
  created() {},
  methods: {
    handle(node){
      console.log(node)
    }
  }
};
</script>
   
  <style lang="scss" rel="stylesheet/scss"  scoped>
.tree {
  color: #fff;
  background-color: transparent;
}
.el-tree {
  min-width: 100%;
  display: inline-block !important;
  color: #fff;
}
.app-content {
  background: #212b61;
  height: 100%;
}

//鼠标移入的颜色
/deep/ .el-tree-node__content:hover {
  background-color: #374590;
}
//鼠标点击的颜色
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #374590;
}
</style>
